<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<jsp:include page="../../fragments/header.jsp">
	<jsp:param name="title" value="Payment Options" />
</jsp:include>

<ol class="progtrckr">
	<li class="progtrckr-done">Shopping Cart</li>
	<li class="progtrckr-done">Customer Info</li>
	<li class="progtrckr-todo">Payment Options</li>
	<li class="progtrckr-todo">Finalizing Order</li>
</ol>

<br/>

<b>Choose your payment type</b><br/>

<form method="post" action="credit_card_info" name="paymentTypeForm">
	<c:if test="${paymentType == 'cash'}">	
		<input type="radio" name="paymentType" value="cash" checked="checked" onClick="document.paymentTypeForm.submit()" /> Cash<br />
		<input type="radio" name="paymentType" value="credit" onClick="document.paymentTypeForm.submit()" /> Credit<br />
	</c:if>

	<c:if test="${paymentType == 'credit'}">
		<input type="radio" name="paymentType" value="cash" onClick="document.paymentTypeForm.submit()" /> Cash<br />
		<input type="radio" name="paymentType" value="credit" checked="checked"  onClick="document.paymentTypeForm.submit()" /> Credit<br />
	</c:if>
</form>

<c:if test="${paymentType == 'credit'}">
	<c:choose>
		<c:when test="${empty customerCreditCards or addNewCredit}">
			<c:choose>
				<c:when test="${addNewCredit == 'true'}">
					<b>Add new credit card</b><br />
					<form name="addNewCreditCardForm" action="credit_card_add" method="post" >
						<table cellpadding="5px">
							<tbody>
								<tr>
									<td>Name On Card</td>
									<td><input type="text" name="nameOnCard" /></td>
									<td><span id="nameOnCard" style="display: none; color: red;">Please enter the name</span></td>
								</tr>
								<tr>
									<td>Card Number</td>
									<td><input type="text" name="cardNumber" /></td>
									<td><span id="cardNumber" style="display: none; color: red;">Please enter your card number(digits)</span></td>
								</tr>
								<tr>
									<td>Security Code</td>
									<td><input type="text" name="securityCode" /></td>
									<td><span id="securityCode" style="display: none; color: red;">Please enter the security code (digits)</span></td>
								</tr>
								<tr>
									<td>Type</td>
									<td>
										<select name="type">
											<option value="VISA" selected="selected">VISA</option>
											<option value="MASTER_CARD">MASTER CARD</option>
										</select>
									</td>
									<td><span id="type" style="display: none; color: red;">Please select card type</span></td>
								</tr>
								<tr>
									<td>Expiration date</td>
									<td><input type="text" name="expirationDate" /></td>
									<td><span id="expirationDate" style="display: none; color: red;">Please enter your card expiration date in format (2023-09-20)</span></td>
								</tr>
								<tr>
									<td></td><td><input type="button" value="Add" onclick="validateAddCreditCardForm()"></td>
								</tr>
							</tbody>
						</table>
					</form>
				</c:when>
				<c:when test="${empty customerCreditCards and  empty addNewCredit}">
					There are no credit cards attached to this customer <br/>
					<form action="credit_card_new" method="post">
						<input type="submit" value="Add new Credit Card" /> 
					</form>
				</c:when>
			</c:choose>
			
		</c:when>

		<c:otherwise>
			<form action="credit_card_new" method="post">
				<input type="submit" value="Add new Credit Card" /> 
			</form>
			<form method="post" action="select_credit_card_item" name="allCustomers">
				<table class="table table-hover">
					<thead>
						<tr>
							<th>Select</th>
							<th>Card Number</th>
							<th>Expiration Date</th>
							<th>Name On Card</th>
							<th>Security Code</th>
							<th>Type</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${customerCreditCards}" var="creditCardItem">
							<tr>
								<td><input type="radio" name="selectedCreditCard" value="${creditCardItem.id}" checked="checked"/></td>
								<td>${creditCardItem.cardNumber}</td>
								<td><fmt:formatDate value="${creditCardItem.expirationDate.time}" type="date" dateStyle="short" /></td>
								<td>${creditCardItem.nameOnCard}</td>
								<td>${creditCardItem.securityCode}</td>
								<td>${creditCardItem.type}</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
				<input type="submit" value="Select" />
			</form>
		</c:otherwise>
	</c:choose>
</c:if>

<c:if test="${selectCreditCardItem == 'true'}">
	<table class="table table-hover">
		<thead>
			<tr>
				<th>Card Number</th>
				<th>Expiration Date</th>
				<th>Name On Card</th>
				<th>Security Code</th>
				<th>Type</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>${selectedCreditCard.cardNumber}</td>
				<td><fmt:formatDate value="${selectedCreditCard.expirationDate.time}" type="date" dateStyle="short" /></td>
				<td>${selectedCreditCard.nameOnCard}</td>
				<td>${selectedCreditCard.securityCode}</td>
				<td>${selectedCreditCard.type}</td>
			</tr>
		</tbody>
	</table>
</c:if>

<br />
<br />

<form action="${pageContext.request.contextPath}/shopping_cart">
	<button class="btn btn-default">
		<b>Back</b>
	</button>
</form>
<form action="${pageContext.request.contextPath}/cancel_order">
	<button class="btn btn-default">
		<b>Cancel Order</b>
	</button>
</form>
<c:if test="${enableNextStep == 'true'}">
	<form
		action="${pageContext.request.contextPath}/order_confirmation_page">
		<button class="btn btn-default">
			<b>Next</b>
		</button>
	</form>
</c:if>

<jsp:include page="../../fragments/footer.jsp" />